<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文件列表2</title>
    <style type="text/css">
        html, body {
            height: 100%;
        }
        #pdfViewer {
            height: 80%;
        }
        #pdfViewer .canvas {
            border: 1px solid black;
            direction: ltr;
        }
    </style>
</head>
<body>
    <p th:each="fileInfo:${fileInfos}">
        <a th:href="@{${fileInfo.getUri()}}" th:text="${fileInfo.getFileName()}"></a>&nbsp;&nbsp;<br>
        <a href="javascript:void(0)" th:onclick="pdfObjectViewer([[${fileInfo.isPdf()?'':'covertToPdf/'} + ${fileInfo.getFileName()}]])">PDFObject显示</a>&nbsp;&nbsp;
        <a href="javascript:void(0)" th:onclick="pdfJsCanvas([[${fileInfo.isPdf()?'':'covertToPdf/'} + ${fileInfo.getFileName()}]])">pdf.js Canvas显示</a>&nbsp;&nbsp;
        <a th:href="@{${fileInfo.getPreviewUri()}}" th:target="_blank">pdf.js viewer.html</a>&nbsp;&nbsp;
        <a href="javascript:void(0)" th:onclick="iframePdfViewer([[${fileInfo.getPreviewUri()}]])">pdf.js viewer.html in iframe</a>&nbsp;&nbsp;
        <a href="javascript:void(0)" th:onclick="iframePdfViewer([[${fileInfo.getUri()}]])">pdf in iframe</a>&nbsp;&nbsp;
        <br>
        <br>
    </p>
    <div id="pdfViewer"></div>
</body>
<script src="/pdfjs-2.5.207-dist/build/pdf.js"></script>
<script src="/pdfjs-2.5.207-dist/build/pdf.worker.js"></script>
<script src="/js/pdfobject-2.2.4.js"></script>
<script src="/js/jquery-3.5.1.js"></script>
<script type="application/javascript">
    function pdfObjectViewer(pdfUrl){
        pdfUrl = '/file/' + pdfUrl;
        console.log(pdfUrl);
        $("#pdfViewer").empty();
        $("#pdfViewer").css("overflow", "");
        if(PDFObject.supportsPDFs){
            PDFObject.embed(pdfUrl, "#pdfViewer");
        }else{
            iframePdfViewer(pdfUrl);
        }
    }

    function pdfJsCanvas(pdfUrl){
        pdfUrl = '/file/' + pdfUrl;
        console.log(pdfUrl);
        $("#pdfViewer").empty();
        $("#pdfViewer").css("overflow", "auto");
        const loadingTask = pdfjsLib.getDocument(pdfUrl);
        loadingTask.promise.then(function(pdf){
            pdfJsView(pdf, "pdfViewer");
        });
    }

    function pdfJsViewer(pdfUrl){
        console.log("//" + window.location.host + pdfUrl);
        // $("#pdfViewer").load("//" + window.location.host + pdfUrl);
        window.location = pdfUrl;
    }

    function iframePdfViewer(url){
        let pdfViewer = $("#pdfViewer");
        console.log(pdfViewer);
        $("#pdfViewer").empty();
        $("#pdfViewer").css("overflow", "");

        let iframe = document.createElement("iframe");
        document.getElementById("pdfViewer").appendChild(iframe);

        iframe.src = url;
        iframe.width = iframe.height = "100%";
    }

    async function pdfJsView(pdf, divId){
        console.log(pdf);
        // document.getElementById(divId).innerText = "";
        let pageNum = pdf.numPages
        for (let pageIndex = 1; pageIndex <= pageNum; pageIndex++) {
            pdf.getPage(pageIndex).then(function(page) {
                console.log("pageIndex:" + pageIndex + "," + page);
                console.log("textContent" + page.getTextContent());
                const scale = 1.5;
                const viewport = page.getViewport({scale: scale});
                //
                // Prepare canvas using PDF page dimensions
                //
                const canvas = document.createElement("canvas");
                document.getElementById(divId).appendChild(canvas);
                const context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                //
                // Render PDF page into canvas context
                //
                const renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);
            });
        }
    }

</script>
</html>